<#include "../common/layout/__mainlayout.html">
    <#include "../common/__pagination.html">
        <!--设置面包屑-->
        <#assign pageBreadCrumbs>
            <li class="active"><a href="#">专题管理</a></li>
            <li class="active">专题管理</li>
        </#assign>

        <#assign pageCss>
            <!-- page specific plugin styles -->
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/jquery-ui.custom.css"/>
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/datepicker.css"/>
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/daterangepicker.css"/>
            <link rel="stylesheet" href="${ctx}/static/admin/assets/css/zTreeStyle/zTreeStyle.css" type="text/css">

        </#assign>

        <#assign pageJavascript>
            <script src="${ctx}/static/admin/assets/js/jquery.validate.js"></script>
            <script src="${ctx}/static/admin/assets/js/jquery.validate.messages_zh.js"></script>
            <script src="${ctx}/static/admin/assets/js/ajaxfileupload.js"></script>

            <script type="text/javascript">
                function uploadSmallIcon(){
                    $.ajaxFileUpload({
                        url:"${ctx}/admin/upload/uploadPic.do?inputName=smallPicFile",            //需要链接到服务器地址
                        dataType : 'text',
                        fileElementId:'id-input-smallPic',                        //文件选择框的id属性
                        success: function(data, status){
                            msg = jQuery.parseJSON(jQuery(data).text());
                            if(msg.result == "success"){
                                var upload=msg.data;
                                $("#smallPicUrl").val(upload);
                                $("#smallPicUrlImg").attr("src","${staticHost}"+upload);
                            }else{
                                alert(msg.messages);
                            }
                        },error: function (data, status, e){
                            alert("上传出错，请重新上传");
                        }
                    });
                }


                function uploadBigIcon(){
                    $.ajaxFileUpload({
                        url:"${ctx}/admin/upload/uploadPic.do?inputName=bigPicFile",            //需要链接到服务器地址
                        dataType : 'text',
                        fileElementId:'id-input-bigPic',                        //文件选择框的id属性
                        success: function(data, status){
                            msg = jQuery.parseJSON(jQuery(data).text());
                            if(msg.result == "success"){
                                var upload=msg.data;
                                $("#bigPicUrl").val(upload);
                                $("#bigPicUrlImg").attr("src","${staticHost}"+upload);
                            }else{
                                alert(msg.messages);
                            }
                        },error: function (data, status, e){
                            alert("上传出错，请重新上传");
                        }
                    });
                }


                $(document).ready(function(){

                    $("#topicShowType").val(${topic.topicShowType!});

                    $(".date-picker").datepicker({
                        language : 'zh-CN',
                        autoclose: true,
                        todayHighlight: true
                    });

                    $('#id-input-smallPic,#id-input-bigPic').ace_file_input({
                        no_file:'未选择文件 ...',
                        btn_choose:'浏览',
                        btn_change:'更改',
                        droppable:false,
                        onchange:null,
                        thumbnail:false //| true | large
                    });

                    $("#topicForm").validate({
                        errorElement: 'div',
                        errorClass: 'help-block',
                        focusInvalid: true,
                        highlight: function (e) {
                            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                        },
                        success: function (e) {
                            $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                            $(e).remove();
                        },
                        errorPlacement: function (error, element) {
                            if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                                var controls = element.closest('div[class*="col-"]');
                                if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                            }
                            else if(element.is('.select2')) {
                                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                            }
                            else if(element.is('.chosen-select')) {
                                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                            }
                            else error.insertAfter(element.parent());
                        },

                        submitHandler: function (form) {
                            if(timeCompareFailed($("#startDate").val(),$("#expiredDate").val())){
                                alert("过期时间需要大于开始时间");
                                return false;
                            }
                            $.ajax({
                                cache: true,
                                type: "POST",
                                url:"${ctx}/admin/topic/saveTopic.do",
                                data:$('#topicForm').serialize(),// 你的formid
                                async: false,
                                error: function(request) {
                                    alert("Connection error");
                                },
                                success: function(data) {
                                    if(data.result == "success"){
                                        window.location="${refer!}";
                                    }else{
                                        alert(msg.messages);
                                    }
                                }
                            });
                        },
                        invalidHandler: function (form) {
                        }
                    })
                });
            </script>
        </#assign>

<@mainlayout pageBreadCrumbs=pageBreadCrumbs pageCss=pageCss pageJavascript=pageJavascript  currentMenu="topicFlag-topicListFlag">
        <form id="topicForm" class="form-horizontal" action="${ctx}/admin/topic/saveTopic.do"  method="post">
                <div class="row">
                <div class="col-sm-12">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h4 class="widget-title">编辑专题内容</h4>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main">
                                <input type="hidden" name="id" id="id" class="col-xs-12 col-sm-4 required" value="${topic.id!}"/>

                                <!--专题名称-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="topicName">专题名称:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" name="topicName" id="topicName" class="col-xs-12 col-sm-8 required" value="${topic.topicName!}"/>
                                        </div>
                                    </div>
                                </div>

                                <!--专题顺序-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="sortIndex">专题顺序:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <input type="number" name="sortIndex" id="sortIndex" class="col-xs-12 col-sm-8 required spinbox-input" value="${topic.sortIndex!}" min="1" >
                                        </div>
                                    </div>
                                </div>

                                <!--展示类型-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="topicShowType">展示类型:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <select class="input-medium" id="topicShowType" name="topicShowType">
                                                <#list showTypes as showType>
                                                    <option value="${showType.id}" >
                                                        ${(showType.name)!}
                                                    </option>
                                                </#list>
                                            </select>
                                        </div>
                                    </div>
                                </div>


                                <!--状态-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="state">状态:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <select class="input-medium" id="state" name="state">
                                                <option value="1" <#if !topic.state?? ||(topic.state?? && topic.state = 1)>selected="selected"</#if>>显示</option>
                                                <option value="0" <#if (topic.state?? && topic.state = 0)>selected="selected"</#if>>隐藏</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>




                                <!--简介-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="summary">简介:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" name="summary" id="summary" class="col-xs-12 col-sm-8 required" value="${topic.summary!}"/>
                                        </div>
                                    </div>
                                </div>
                                <!--详细介绍-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="description">详细介绍:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <textarea  name="description" id="description" class="col-xs-12 col-sm-8 required" value="${topic.description!}">${topic.description!}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <!--开始时间-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="startDate">开始时间:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="input-medium input-group">
                                            <input type="text" name="startDate" id="startDate" class="input-medium date-picker" value="${topic.startTimeShow!}" readonly  data-date-format="yyyy-mm-dd"/>
                                            <span class="input-group-addon"> <i class="ace-icon fa fa-calendar"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <!--过期时间-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="expiredDate">过期时间:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="input-medium input-group">
                                            <input type="text" name="expiredDate" id="expiredDate" class="input-medium date-picker" value="${topic.expiredTimeShow!}" readonly  data-date-format="yyyy-mm-dd"/>
                                            <span class="input-group-addon"> <i class="ace-icon fa fa-calendar"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <!--小图片-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="id-input-smallPic">小图片:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="col-xs-8">
                                            <!-- #section:custom/file-input -->
                                            <input type="file" id="id-input-smallPic" name="smallPicFile"  value="${topic.smallPicUrl!}"/>
                                        </div>
                                        <button type="button" id="id-button-apk" class="btn btn-sm btn-success" onclick="uploadSmallIcon()">
                                            上传 <i class="ace-icon fa fa-arrow-right icon-on-right bigger-60"></i>
                                        </button>

                                        <input type="hidden" name="smallPicUrl" id="smallPicUrl" class="col-xs-12 col-sm-8 required" value="${topic.smallPicUrl!}"/>
                                    </div>
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="id-input-smallPic"></label>
                                    <div class="col-xs-12 col-sm-9">
                                        <a id="smallPicUrla" data-rel="colorbox">
                                            <img id="smallPicUrlImg" name="smallPicUrlImg" src="${staticHost}${topic.smallPicUrl!}" width="128" height="128" />
                                        </a>
                                    </div>
                                </div>
                                <!--大图片-->
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="bigPicUrl">大图片:</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="col-xs-8">
                                            <!-- #section:custom/file-input -->
                                            <input type="file" id="id-input-bigPic" name="bigPicFile"  value="${topic.bigPicUrl!}"/>
                                        </div>
                                        <button type="button" id="id-button-bigPic" class="btn btn-sm btn-success" onclick="uploadBigIcon()">
                                            上传 <i class="ace-icon fa fa-arrow-right icon-on-right bigger-60"></i>
                                        </button>

                                        <input type="hidden" name="bigPicUrl" id="bigPicUrl" class="col-xs-12 col-sm-8 required" value="${topic.bigPicUrl!}"/>
                                    </div>
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="id-input-smallPic"></label>
                                    <div class="col-xs-12 col-sm-9">
                                        <a id="bigPicUrla" data-rel="colorbox">
                                            <img id="bigPicUrlImg" name="smallPicUrlImg" src="${staticHost}${topic.bigPicUrl!}" width="128" height="128" />
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

                <div class="center">
                    <button type="submit" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> 保存</button>
                    <button type="button" class="btn btn-sm" onclick="window.location='${ctx}/admin/topic/topicList.html';"><i class="ace-icon fa fa-times"></i> 取消</button>
                </div>
        </form>

        <div id="editModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>

    </@mainlayout>
